import React, { Component } from 'react'

// 父传子通过属性，子传父通过回调函数
class Navbar extends Component {
    render() {

        return (
            <div style={{ background: 'red' }}>
                {/* 使用插槽：children */}
                {this.props.children}
                <span>Navbar</span>
            </div>
        )
    }
}
class Sidebar extends Component {
    render() {
        return (
            <div style={{ background: 'yellow',width:"200px" }}>
                <ul>
                    <li>Sidebar</li>
                    <li>Sidebar</li>
                    <li>Sidebar</li>
                    <li>Sidebar</li>
                    <li>Sidebar</li>
                    <li>Sidebar</li>
                    <li>Sidebar</li>
                    <li>Sidebar</li>
                    <li>Sidebar</li>
                    <li>Sidebar</li>
                    <li>Sidebar</li>
                    <li>Sidebar</li>
                </ul>
            </div>
        )
    }
}
export default class App extends Component {
    state={
        isshow:false
    }
    
    render() {
        return (
            <div>
                <Navbar >
                    {/* 插槽 */}
                <button onClick={()=>{
                    this.setState({
                        isshow:!this.state.isshow
                    })
                }}>点击</button>
                </Navbar>
                {this.state.isshow&&<Sidebar></Sidebar>}
               
            </div> 
        )
    }
}
